<template>
   <div class="upload-container">
    <!-- 上传按钮 -->
    <input 
      type="file" 
      ref="fileInput" 
      @change="handleFileChange" 
      accept="image/*" 
      style="display: none"
    >
    <button 
      class="upload-btn" 
      @click="triggerFileInput"
    >
      选择图片
    </button>
    
    <!-- 预览区域 -->
    <div v-if="imageUrl" class="preview-area">
      <img :src="imageUrl" alt="预览图" class="preview-image">
      <div class="preview-actions">
        <button @click="confirmUpload" class="confirm-btn">上传</button>
        <button @click="cancelUpload" class="cancel-btn">取消</button>
      </div>
    </div>
    
    <!-- 上传状态 -->
    <div v-if="uploadStatus" class="status-message" :class="{'error': uploadStatus.error}">
      {{ uploadStatus.message }}
    </div>
   </div>   
</template>
   
<script setup name="Image">   
import { ref } from 'vue'   
import { uploadImageApi } from '../api/index'
import { useRouter } from 'vue-router'
   
const fileInput = ref(null)   
const selectedFile = ref(null)   
const imageUrl = ref('')   
const uploadStatus = ref(null)
const router=useRouter()
// 触发文件选择   
const triggerFileInput = () => {
   fileInput.value.click()   
}
   
// 处理文件选择   
const handleFileChange = (e) => {
   const file = e.target.files[0]
   if (!file) return
  
  // 验证文件类型
   if (!file.type.startsWith('image/')) {
    uploadStatus.value = { error: true, message: '请选择有效的图片文件' }
    return
   }
  
  // 验证文件大小 (例如限制5MB)
   if (file.size > 5 * 1024 * 1024) {
    uploadStatus.value = { error: true, message: '图片大小不能超过5MB' }
    return
   }
  
  selectedFile.value = file
   previewImage(file)
   uploadStatus.value = null   
}
   
// 预览图片   
const previewImage = (file) => {
   const reader = new FileReader()
   reader.onload = (e) => {
    imageUrl.value = e.target.result
   }
   reader.readAsDataURL(file)   
}
   
// 确认上传   
const confirmUpload = async () => {
   if (!selectedFile.value) return
  
  try {
    const response = await uploadImageApi(selectedFile.value)
   //  console.log(response);
    if (response.data.success) {
      uploadStatus.value = { error: false, message: '上传成功!' }
      emit('upload-success', response.data.data.url) // 触发上传成功事件
      resetUpload()
    }
    router.back()
   } catch (error) {
    uploadStatus.value = { error: true, message: '上传失败: ' + error.message }
   }   
}
   
// 取消上传   
const cancelUpload = () => {
   resetUpload()   
}
   
// 重置上传状态   
const resetUpload = () => {
   selectedFile.value = null
   imageUrl.value = ''
   fileInput.value.value = '' // 清除input的值以允许重复选择同一文件   
}
   
// 定义事件   
const emit = defineEmits(['upload-success'])   
</script>
   
<style lang='less' scoped>   
.upload-container {
   display: flex;
   flex-direction: column;
   gap: 15px;
   max-width: 500px;
   margin: 0 auto;
   padding: 20px;
   border-radius: 8px;
   background-color: #f5f5f5;   
}
   
.upload-btn {
   padding: 10px 15px;
   background-color: #409eff;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.3s;
  
  &:hover {
    background-color: #66b1ff;
   }   
}
   
.preview-area {
   display: flex;
   flex-direction: column;
   gap: 10px;   
}
   
.preview-image {
   max-width: 100%;
   max-height: 300px;
   border-radius: 4px;
   object-fit: contain;   
}
   
.preview-actions {
   display: flex;
   gap: 10px;   
}
   
.confirm-btn, .cancel-btn {
   padding: 8px 12px;
   border: none;
   border-radius: 4px;
   cursor: pointer;   
}
   
.confirm-btn {
   background-color: #67c23a;
   color: white;
  
  &:hover {
    background-color: #85ce61;
   }   
}
   
.cancel-btn {
   background-color: #f56c6c;
   color: white;
  
  &:hover {
    background-color: #f78989;
   }   
}
   
.status-message {
   padding: 8px;
   border-radius: 4px;
  
  &.error {
    color: #f56c6c;
    background-color: #fef0f0;
   }
  
  &:not(.error) {
    color: #67c23a;
    background-color: #f0f9eb;
   }      
}      
</style>   
